<template>
    <div>
        <h1>用户列表</h1>
        <table border="1px" cellspacing="0" width="800px">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb" align="center">
            <tr v-for="(user, index) in userList" :key="user.id">
                <td>{{ index+1 }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.phone }}</td>
                <td>{{ user.address }}</td>
                <td>{{ user.status==0 ? '启用':'禁用' }}</td>
                <td>
                    <button @click="deleteUser(user.id)">删除</button>
                    <button @click="updateStatus(user.id, user.status)">{{ user.status==0 ? '禁用':'启用' }}</button>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userList: []
        }
    },
    methods: {
        async loadUsers(){
            let res = await this.$http.get('http://ums.tangxiaoyang.vip/api/users/list')
            if(res.data.status != 200){
                return alert(res.data.msg)
            }
            this.userList = res.data.data
            console.log(this.userList)
        },
        deleteUser(id){

        },
        updateStatus(id, status){
            
        }
    },
    created(){
        this.loadUsers()
    }
}
</script>

<style lang="less" scoped>
    
</style>